<template>
  <div>
    <div class="catalogue" :class="{ 'catalogue-collapse': !props.catalogueExpandCollapse }">
      <div class="flex flex-sb flex-ai-center">
        <div v-show="props.catalogueExpandCollapse" class="analysis-title">标准目录</div>
        <img
          src="@/assets/images/analysis/expand.png"
          class="catalogue-expand"
          :class="{ 'catalogue-expand-collapse': !props.catalogueExpandCollapse }"
          @click="handleExpandCollapse"
        />
      </div>
    </div>
    <div v-if="treeList && treeList.length > 0" class="analysis-scrollbar">
      <el-tree
        v-show="props.catalogueExpandCollapse"
        v-loading="treeLoading"
        :data="treeList"
        ref="treeRef"
        node-key="id"
        :highlight-current="true"
        :props="defaultProps"
        :expand-on-click-node="false"
        :default-expand-all="true"
        @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <span class="tree-node">
            <span class="tree-label">
              <i v-if="node.level == 1" class="iconfont icon-levels c-primary f-18"></i>
              <span v-showToolTip="['tree']">
                <el-tooltip placement="bottom-start" :content="node.label">
                  <span class="tree-level" :class="{ level1: node.level == 1, 'level-other': node.level != 1 }">
                    {{ node.label }}
                  </span>
                </el-tooltip>
              </span>
            </span>
          </span>
        </template>
      </el-tree>
    </div>
    <empty v-else />
  </div>
</template>

<script setup>
  const props = defineProps({
    catalogueExpandCollapse: {
      type: Boolean,
      default: true,
    },
    treeList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  });
  const { treeList } = toRefs(props);

  const treeLoading = ref(false);
  const defaultProps = ref({
    children: 'children',
    label: 'name',
  });

  const handleExpandCollapse = () => {
    emit('expandCollapse', 'catalogue');
  };

  const handleNodeClick = item => {
    emit('scrollTo', item.id);
  };

  const emit = defineEmits(['expandCollapse', 'scrollTo']);
</script>

<style lang="scss" scoped>
  .catalogue {
    padding: 24px 15px 10px;
    box-sizing: border-box;
    transition: padding 0.3s ease-in-out;

    &-expand {
      height: 16px;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }
  }

  .tree-node {
    .tree-level {
      color: #333333;
      margin-left: 10px;
    }

    .level1 {
      font-weight: bold;
      font-size: 16px;
    }

    .level-other {
      font-size: 14px;
    }
  }

  :deep(.el-tree-node__expand-icon) {
    font-size: 12px;
  }

  :deep(.el-tree-node__content) {
    height: 40px !important;

    &:hover {
      background: #e9f0fe;
      border-radius: 5px;
      color: $primary-color;
    }

    .tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 8px;
      height: 40px;
      overflow: hidden;

      .tree-label {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
    color: $primary-color;
  }

  .catalogue-collapse {
    padding: 24px 0 10px !important;
  }

  .catalogue-expand-collapse {
    display: block;
    margin: 0 auto 80px !important;
    transform: rotate(180deg);
  }

  .analysis-scrollbar {
    padding: 0 7px 0 15px;
    height: calc(100vh - 86px - 58px);
  }
</style>
